<template>
  <div class="WorkmanshipData" ref="WorkmanshipData">
    <div class="tab_box">
      <div class="title">远程监控</div>
      <WorkmanshipDataBig
        v-if="tokenz8 !== '06'"
        :openScreen.sync="openScreen"
        @screenCallback="screenCallback"
        ref="bigScreenRef1"
      ></WorkmanshipDataBig>
      <WorkmanshipDataBigZ8
        v-else
        :openScreen.sync="openScreen"
        @screenCallback="screenCallback"
        ref="bigScreenRef1"
      ></WorkmanshipDataBigZ8>
      <div class="icons">
        <span class="el-icon-full-screen" @click="openDrawer"></span>
      </div>
    </div>
    <div class="details3_box" ref="piediv">
      <el-table
        :row-class-name="tableRowClassName"
        :data="workTableData"
        style="width: 100%"
        height="100px"
        v-adaptive="{ bottomOffset: 30 }"
        :header-cell-class-name="headerRowStyle"
      >
        <el-table-column prop="num" label="阶段" width="50"> </el-table-column>
        <el-table-column
          prop="temperature"
          label="装炉温度(℃)"
          width="100"
          v-if="!isCasting"
        >
        </el-table-column>
        <el-table-column
          prop="temperature_1"
          label="升温速度"
          width="100"
          v-if="isCasting"
        >
        </el-table-column>

        <el-table-column
          v-if="!isCasting"
          prop="processTime"
          label="温度偏量(℃)"
          width="100"
        >
        </el-table-column>
        <el-table-column
          v-else
          prop="processTime"
          label="温度均匀值(℃)"
          width="100"
        >
        </el-table-column>
        <!-- <el-table-column prop="deadZone" label="温度偏量(℃)"> </el-table-column> -->
        <el-table-column
          prop="controlStrategy"
          label="设定时间(min)"
          width="110"
        >
        </el-table-column>
        <el-table-column
          prop="data8"
          label="当前温度"
          width="100"
        ></el-table-column>
        <el-table-column prop="data4" label="开始时间" width="100">
        </el-table-column>
        <el-table-column prop="data5" label="剩余时间(min)"> </el-table-column>
        <el-table-column prop="data6" label="结束时间" width="100">
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template> 执行中 </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="出炉设置编辑"
      center
      :modal="false"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <!-- <span>这是一段信息</span> -->
      <el-form
        style="margin-top: 10px"
        size="mini"
        label-width="auto"
        :model="formLabelAlign"
      >
        <el-form-item label="工艺类型：">
          <el-select
            :popper-append-to-body="false"
            class="w100"
            v-model="formLabelAlign.type"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出炉批次：">
          <el-select
            :popper-append-to-body="false"
            class="w100"
            v-model="formLabelAlign.num"
            placeholder="请选择"
            multiple
            collapse-tags
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出炉提醒：">
          <el-switch v-model="formLabelAlign.tip"> </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="工艺配方编辑"
      center
      :modal="false"
      :visible.sync="processDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        style="margin-top: 10px"
        size="mini"
        label-width="auto"
        :model="formLabelAlign2"
      >
        <el-form-item label="装炉温度：">
          <el-input
            placeholder="请输入"
            v-model="formLabelAlign2.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="设定温度：">
          <el-input
            placeholder="请输入"
            v-model="formLabelAlign2.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="温度上限：">
          <el-input
            placeholder="请输入"
            v-model="formLabelAlign2.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="温度下限：">
          <el-input
            placeholder="请输入"
            v-model="formLabelAlign2.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="设定时间：">
          <el-input
            placeholder="请输入"
            v-model="formLabelAlign2.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="时间上限：">
          <el-input
            placeholder="请输入"
            v-model="formLabelAlign2.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="时间下限：">
          <el-input
            placeholder="请输入"
            v-model="formLabelAlign2.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="补偿值设置：">
          <el-input
            placeholder="请输入"
            v-model="formLabelAlign2.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="控制策略：">
          <el-select
            :popper-append-to-body="false"
            class="w100"
            v-model="formLabelAlign2.num1"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="随动策略：">
          <el-select
            :popper-append-to-body="false"
            class="w100"
            v-model="formLabelAlign2.num2"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="processDialogVisible = false"
          >取 消</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="processDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import _ from "lodash";
import WorkmanshipDataBig from "./WorkmanshipDataBig";
import WorkmanshipDataBigZ8 from "./WorkmanshipDataBigZ8";
import { mapState, mapGetters } from "vuex";
import { TENANT_TITLE } from "@/utils/local";
export default {
  components: {
    WorkmanshipDataBig,
    WorkmanshipDataBigZ8,
  },
  props: {
    tokenz8: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      openScreen: false,
      options1: [
        {
          value: "热处理",
          label: "热处理",
        },
        {
          value: "自由锻",
          label: "自由锻",
        },
        {
          value: "模锻",
          label: "模锻",
        },
      ],
      options2: [
        {
          value: "2874638",
          label: "2874638",
        },
        {
          value: "2979373",
          label: "2979373",
        },
        {
          value: "2947092",
          label: "2947092",
        },
        {
          value: "192749",
          label: "192749",
        },
      ],
      options3: [
        {
          value: "标准值策略",
          label: "标准值策略",
        },
        {
          value: "下限值策略",
          label: "下限值策略",
        },
      ],
      options4: [
        {
          value: "SV",
          label: "SV",
        },
        {
          value: "PV",
          label: "PV",
        },
      ],
      formLabelAlign: {},
      formLabelAlign2: {
        num1: "标准值策略",
        num2: "SV",
      },
      dialogVisible: false,
      processDialogVisible: false,
      activeName: "first",
      setHeight: 300,
      day: 0,
      hr: 0,
      min: 0,
      sec: 0,
      workTableData: [
        {
          temperature_1: "5℃/分钟",
          num: "一", //阶段
          temperature: "150", //装炉温度
          processTime: "500", //设定温度
          controlStrategy: "100", //设定时间
          data8: "", //当前温度
          data4: "", //开始时间
          data5: "100", //剩余时间
          data6: "", //结束时间
          state: "待执行", //状态
        },
        {
          temperature_1: "10℃/分钟",
          num: "二", //阶段
          temperature: "", //装炉温度
          processTime: "500", //设定温度
          controlStrategy: "200", //设定时间
          data8: "", //当前温度
          data4: "", //开始时间
          data5: "200", //剩余时间
          data6: "", //结束时间
          state: "待执行", //状态
        },
        {
          temperature_1: "-",
          num: "三", //阶段
          temperature: "", //装炉温度
          processTime: "950", //设定温度
          controlStrategy: "150", //设定时间
          data8: "", //当前温度
          data4: "", //开始时间
          data5: "150", //剩余时间
          data6: "", //结束时间
          state: "待执行", //状态
        },
        {
          temperature_1: "-",
          num: "四", //阶段
          temperature: "", //装炉温度
          processTime: "950", //设定温度
          controlStrategy: "300", //设定时间
          data8: "", //当前温度
          data4: "", //开始时间
          data5: "300", //剩余时间
          data6: "", //结束时间
          state: "待执行", //状态
        },
      ],
    };
  },
  computed: {
    // ...mapGetters(["workTableData"]),
    isCasting() {
      const { name } = this.$store.getters.tenant;
      return name == TENANT_TITLE[2];
    },
  },
  mounted() {
    // for (let index = 0; index < 9; index++) {
    // }
  },
  methods: {
    handMsg() {
      this.$msg({
        type: "success",
        message: "参数已下发!",
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    headerRowStyle() {
      return "success-row";
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    handleClick() {},
    //放大
    openDrawer() {
      this.openScreen = true;
    },
    //缩小时回调
    screenCallback() {
      this.openScreen = false;
    },
  },
};
</script>

<style lang='scss' scoped>
.WorkmanshipData {
  border: 1px solid #0da9f2;
  background-color: #081f63;
  height: 43%;
  overflow: hidden;
  padding-bottom: 120px;
  /deep/ .el-form {
    .el-form-item {
      margin-bottom: 6px;
      .el-select-dropdown__item.hover,
      .el-select-dropdown__item:hover {
        background-color: #0da9f2;
      }
      .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
        background-color: #0da9f2;
      }
      .el-select-dropdown {
        background-color: #081f63;
        /* color: #fff !important; */
        border: 1px solid #0da9f2;
        span {
          color: #fff;
        }
      }
      .el-input__inner {
        background: rgba(1, 11, 71, 0.74);
        border: 1px solid #0da9f2;
      }
    }
    .el-form-item__label {
      padding: 0;
      color: #fff;
    }
  }
  /deep/ .el-dialog {
    background-color: #021750;
    color: #ffffff;
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 100%;
    }
    .el-form-item__label {
      color: #ffffff;
    }
    .el-dialog__title {
      color: #ffffff;
    }
    .el-dialog__header {
      background-color: #077bb3;
    }
  }
  /* height: 100%; */
  .icon_color {
    color: #5dcbff;
  }
  /deep/ .gutter {
    display: none;
  }
  /deep/ .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /deep/
    .el-table--scrollable-y
    .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  /deep/
    .el-table--scrollable-y
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }

  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }
  .tab_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #010b47;
    /* height: 52px; */
    padding: 10px;
    margin-bottom: 10px;
    .icons {
      display: flex;
      align-items: center;
      .line {
        background-color: #143e94;
        height: 16px;
        width: 1px;
        margin: 0 10px;
      }
    }
    .title {
      font-size: 16px;
    }
  }
  .btns {
    display: flex;
    align-items: center;

    padding: 10px 16px;
    justify-content: flex-end;
    padding-left: 0;
    /deep/ .el-button--mini,
    .el-button--mini.is-round {
      padding-left: 0;
      padding-right: 0;
    }
    .img_btn {
      width: 12px;
      height: 12px;
      margin-right: 4px;
    }
  }
  /deep/ .el-table {
    background-color: #093085 !important;
    border: 1px solid #0da9f2;
    .has-gutter {
      th {
        padding: 6px 0;
      }
    }
    .el-table__row:hover > td {
      background-color: inherit !important;
    }
    td,
    th.is-leaf {
      border-bottom: 0 !important;
    }
    .el-table__row--striped:hover > td {
      background-color: inherit;
    }
    .warning-row {
      background: #093085 !important;
      color: #fff;
    }
    .success-row {
      background: #002675;
      color: #fff;
    }
  }
  .details3_box {
    padding: 0 15px;
    /* background-color: inherit;
     */
    /* padding: 20px; */
    overflow: auto;
    /* height: 100%; */
    margin-top: 0px;
  }
}
</style>